<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
            <div class="add-new-plan">
                <el-form label-width="150px" :model="buildNodeInfoForm" :rules="buildNodeInfoFormRules" ref="buildNodeInfoForm" @submit.native.prevent>
                    <el-form-item label="父节点：">
                        <el-input v-model="currentParentName" auto-complete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称：" prop="name">
                        <el-input v-model="buildNodeInfoForm.name" auto-complete="off" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序号：" prop="sort">
                        <el-input v-model="buildNodeInfoForm.sort" auto-complete="off" placeholder="请输入排序号" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="节点属性：" prop="type">
                        <el-radio-group :disabled="hasChildNodes && !isAddChild" v-model="buildNodeInfoForm.type">
                            <el-radio v-for="item in typeOptions" :key="item.dictKey" :label="item.dictKey">{{item.dictValue}}</el-radio>
                        </el-radio-group>
                        <div>
                            <p class="color-2" style="font-size: 14px;line-height: 24px;">注意：<br/>1、请严格按照单位实际情况选择。<br/>2、分区是最小一级，常见的分区是房间。<br/>3、单位必须创建楼栋与层信息，否则会导致APP上无法开展维保。</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="二维码：" prop="visualCode">
                        <el-row>
                            <el-radio :disabled="isEdit" v-model="buildNodeInfoForm.visualCodeType" label="0">由系统自动生成二维码</el-radio>
                        </el-row>
                        <el-row>
                            <el-radio :disabled="isEdit" v-model="buildNodeInfoForm.visualCodeType" label="1">人工添加二维码编码</el-radio>
                            <el-input :disabled="isEdit" v-if="buildNodeInfoForm.visualCodeType==1" v-model="buildNodeInfoForm.visualCode" auto-complete="off" placeholder="请输入二维码编码"></el-input>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="VR地址：">
                        <el-input v-model="buildNodeInfoForm.vrUrl" auto-complete="off" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="室内地图结构：">
                        <el-select filterable v-model="buildNodeInfoForm.indoorId" placeholder="请选择室内地图结构">
                            <el-option
                                v-for="item in inRoomMapOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="分层图：" prop="isAddLayeredGraph">
                        <el-radio-group v-model="buildNodeInfoForm.isAddLayeredGraph">
                            <el-radio label="1">有</el-radio>
                            <el-radio label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="室内地图：" prop="indoorMapId">
                        <el-select v-model ="buildNodeInfoForm.indoorMapId"
                            placeholder="请选择室内地图" filterable @change="changeIndoorMap">
                            <el-option
                                v-for="item in indoorMapOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="室内地图楼层：" prop="indoorId">
                        <el-select filterable
                        v-model="buildNodeInfoForm.indoorId" >
                            <el-option
                                v-for="item in indoorIdOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0" class="verifyidentity-button">
                        <el-button round @click.stop="closeDialogFun">取消</el-button>
                        <el-button type="primary" round @click="saveBuildNodeInfo('assetInfoForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import util from '@/utils/util'
import { getDictByCode, getDictValByKey } from '@/api/dic'
import { getIndoorInfoList} from '@/api/org'
import { updateFbsBaseInfo } from '@/api/sysConfig'

export default {
    name: 'BuildNodeInfoForm',
    props: {
        organizationId: {
            required: true
        },
        parentId: {
            required: true
        },
        parentType: {
            required: true
        },
        parentName: {
            required: true
        },
        hasChildNodes: {
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {
                    id: ''
                }
            }
        },
        closeDialogFun: {
            type: Function,
            required: true
        },
        isAddChild: {
            type: Boolean,
            default () {
                return false
            }
        },
    },
    data() {
        var checkVisualCode = (rule, value, callback) => {
            if(this.buildNodeInfoForm.visualCodeType == 1) {
                if (value === '') {
                    callback(new Error('请输入二维码'))
                } else {
                    callback()
                }
            } else {
                callback()
            }
        }
        return {
            isEdit: false,
            currentParentId: this.isAddChild ? this.oldInfo.id : this.parentId,
            currentParentType: this.isAddChild ? this.oldInfo.type : this.parentType,
            currentParentName: this.isAddChild ? (this.oldInfo.text || this.oldInfo.name) : this.parentName,
            firstLoad: true,
            typeOptions: [], // 节点属性选项值
            inRoomMapOptions: [], // 节点属性选项值
            indoorMapOptions:[], //室内地图
            indoorIdOptions:[], //室内地图楼层
            buildNodeInfoForm: {
                id: this.isAddChild ? '' : this.oldInfo.id,
                organizationId: this.organizationId,
                parentId: this.isAddChild ? this.oldInfo.id : (this.parentId || ''), // 父节点
                name: '', // 名称
                type: '', // 节点属性
                vrUrl: '', // vr地址
                indoorId: '', // 室内地图结构
                isAddLayeredGraph: '0', // 分层图
                visualCodeType: '0', // 二维码生成方式
                visualCode: '', // 二维码
                sort: '', // 排序
                isTop: 0,
                layeredGraphUrl : this.isAddChild ? '' : (this.oldInfo.layeredGraphUrl || ''),
                indoorMapId:'',
                indoorId:'',
            },
            buildNodeInfoFormRules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序号', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择节点属性', trigger: 'change' }
                ],
                visualCode: [
                    { required: true, validator: checkVisualCode, trigger: 'change' }
                ]
            },
        }
    },
    created() {
        let that = this
        // 获取节点属性
        getDictByCode({code: 93}).then(res => {
            if(res.status === 200) {
                // 是否为顶级 是否为编辑
                if(!that.oldInfo.parentId && that.oldInfo.id && !that.isAddChild) {
                    // 如果是顶级并且无子节点，可以选择所有节点属性
                    that.typeOptions = res.data.dictValueObj
                } else {
                    if (that.currentParentType == 1 || that.currentParentType == 2) {
                        // 单位 // 片区
                        that.typeOptions = res.data.dictValueObj.splice(1, 2)
                    }  else if (that.currentParentType == 3) {
                        // 楼栋
                        that.typeOptions = res.data.dictValueObj.splice(3, 1)
                    } else if (that.currentParentType == 4) {
                        // 楼层
                        that.typeOptions = res.data.dictValueObj.splice(4, 1)
                    } else if (that.currentParentType == 5) {
                        // 分区
                        that.typeOptions = []
                    }
                }
            }
        })
        // 室内地图结构
        getDictValByKey({
            code: 62,
            dictKey: that.organizationId
        }).then(res => {
            if(res.status === 200 && res.data.val) {
                that.inRoomMapOptions = JSON.parse(res.data.val)
            }
        })
        that.$nextTick(() => {
            // 是否有历史数据 && 不是新增
            if(that.oldInfo.id && that.oldInfo.id != '' && !that.isAddChild) {
                that.isEdit = true
                for(var key in that.buildNodeInfoForm) {
                    if (key == 'isTop') {
                        that.buildNodeInfoForm[key] = that.oldInfo[key] || 0
                    } else if (key == 'isAddLayeredGraph' || key == 'type') {
                        that.buildNodeInfoForm[key] = String(that.oldInfo[key] || '0')
                    } else {
                        that.buildNodeInfoForm[key] = that.oldInfo[key] || ''
                    }
                }
            }
        })
        that.getIndoorInfoOptions()
    },
    methods: {
        // 保存建筑节点信息
        saveBuildNodeInfo() {
            let that = this
            that.$refs['buildNodeInfoForm'].validate((valid) => {
                if (valid) {
                    let parames = that.buildNodeInfoForm
                    parames.parentId = parames.parentId == 'null' ? '' : parames.parentId
                    // 提交
                    updateFbsBaseInfo(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            that.closeDialogFun(true)
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        //获取室内地图列表
        getIndoorInfoOptions(){
            let that = this
            let parames = {
                queryType: 0,
                pageIndex: 0,
                pageSize: 0,
                types: '0,1,2,3'
            }
            getIndoorInfoList(parames).then(res => {
                that.indoorMapOptions = res.data
                that.initIndoor()
            })
        },
        initIndoor(){
            let self = this
            let deployInfo = ''
            let value = Number(self.buildNodeInfoForm.indoorMapId)
            let optinos = self.indoorMapOptions;
            for(let i = 0 ;i<optinos.length;i++){
                if(optinos[i].id === value){
                    deployInfo  = optinos[i].deployInfo
                    break
                }
            }
            if(deployInfo){
                self.indoorIdOptions = JSON.parse(deployInfo);
            }
        },
        changeIndoorMap(value){
            let self = this
            let deployInfo = ''
            let optinos = self.indoorMapOptions;
            for(let i = 0 ;i<optinos.length;i++){
                if(optinos[i].id === value){
                    deployInfo  = optinos[i].deployInfo
                    break
                }
            }
            if(deployInfo){
                self.indoorIdOptions = JSON.parse(deployInfo)
                self.buildNodeInfoForm.indoorId = ''
            }
        },
    }
}
</script>

<style lang="scss">

</style>
